<template>
    <div :class="{
        'card-box': true,
        'show-card': showCard,
        'is-right': isRight
    }">
        <div class="card-back">
            <div class="left">
                <span class="code">{{ code }}</span>
                <i :class="['smallIcon', 'iconfont', icon]"></i>
            </div>
            <div class="right">
                <i :class="['icon', 'iconfont', icon]"></i>
            </div>
        </div>
        <div class="card-cover">
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { pokeColorEnum } from '../constants/enum.js'

const props = defineProps([
    'icon',
    'code',
    'showCard',
    'isRight'
])

const color = computed(() => {
    if (!props.code) return ''
    return pokeColorEnum[props.icon]
})


</script>

<style scoped lang="less">
.card-box {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    /* 保持3D效果 */
    transition: transform .4s;
    /* 动画过渡效果 */
    transform: rotatey(-180deg);

    &:nth-child(1) {
        &.is-right {
            left: 0;
            z-index: 3;

        }

        right: 0;
        z-index: 1;
    }

    &:nth-child(2) {
        &.is-right {
            left: -50%;
            z-index: 2;
        }

        right: -50%;
        z-index: 2;
    }

    &:nth-child(3) {
        &.is-right {
            left: -100%;
            z-index: 1;
        }

        right: -100%;
        z-index: 3;
    }

    &.show-card {
        transform: rotatey(0deg);
    }
    .card-cover,
    .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18)
    }

    .card-cover {
        background: url('@/assets/image/poke-back.png') center no-repeat;
        background-size: contain;
        transform: rotatey(180deg);
        width: 100%;
        height: 100%;
    }

    .card-back {
        background-color: #fff;
        border: 1px solid #000;
        border-radius: 6px;
        @padding: 5px;
        @color: v-bind(color);
        color: @color;
        transform: rotatey(0deg);
        .left {
            position: absolute;
            left: @padding;
            top: @padding;
            display: flex;
            flex-direction: column;
            align-items: start;

            .code {
                font-size: 30px;
            }

            .smallIcon {
                font-size: 15px;
            }
        }

        .right {
            position: absolute;
            right: @padding;
            bottom: @padding;
            .icon {
                font-size: 30px;
            }
        }
    }
}
</style>
